<!--制定客户开发计划页面   ————————  客户经理和销售主管可查看  -->
<template>
  <div id="CreateDevelopmentPlan">
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">营销管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户开发计划</strong><span>/</span></li>
        <li><strong>制定开发计划</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;">
        <div class="page-title" style="border-bottom: #F1F3F6 1px solid;">
          <h2>制定开发计划</h2>
          <hr>
        </div>
        <div style="margin: 0px 20px 40px 20px">
          <el-radio-group v-model="size">
            <el-radio label="">默认</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="small">小型</el-radio>
            <el-radio label="mini">超小</el-radio>
          </el-radio-group>
          <el-descriptions style="margin-top: 20px" class="margin-top" title="" :column="3" :size="size" border>
            <el-descriptions-item>
              <template slot="label">
                销售机会编号
              </template>
              {{salesChance.saleId}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                机会来源
              </template>
              {{salesChance.saleSource}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                客户名称
              </template>
              {{ salesChance.customerName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                成功几率(%)
              </template>
              {{ salesChance.successProbability }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                销售机会概要
              </template>
              {{ salesChance.saleOutline }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系人
              </template>
              {{ salesChance.contactsName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系人电话
              </template>
              {{ salesChance.contactsTel1 }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template slot="label">
                机会描述
              </template>
              {{ salesChance.saleDescribe }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                创建人
              </template>
              {{salesChance.saleCreaterName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                创建时间
              </template>
              {{salesChance.saleDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                指派给
              </template>
              {{salesChance.staffName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                指派时间
              </template>
              {{salesChance.saleAssignDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
              </template>
            </el-descriptions-item>
          </el-descriptions>

        </div>

        <div style="border-bottom: 2px #D9D9D9 solid;margin-right: 20px"></div>

        <div v-if="developmentPlans == ''" class="alert alert-danger" style="margin-top: 20px">
          你还没有计划，请先制定计划！！！
        </div>

        <table v-if="developmentPlans !=''" class="table">
          <thead>
          <tr>
            <th>编号</th>
            <th>日期</th>
            <th>计划项</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for=" (item,index) in developmentPlans">
            <th scope="row">{{ index+1}}</th>
            <td><span style="font-size: 20px">{{item.planDate}}</span></td>
            <td><span style="font-size: 20px">{{item.planContent}}</span></td>
          </tr>
          </tbody>
        </table>

        <form action="">
          <div style="border-bottom: 2px #D9D9D9 solid;margin-right: 20px"></div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">计划时间</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input readonly="readonly" v-model="newDevelopmentPlan.planDate" type="date" class="form-control" style="width: 400px;">
            </div>
          </div>

          <div class="form-group">
            <strong style="font-weight: 1000;font-size: 20px">计划项</strong>
            &nbsp;<span style="color: red;font-size: 15px">*</span>
            <div style="padding-left: 20px;">
              <input v-model="newDevelopmentPlan.planContent" type="text" class="form-control" placeholder="请输入计划项" style="width: 400px;">
            </div>
          </div>

          <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
            <input v-on:click="createPlan" type="button" class="btn btn-primary" value="保存">
            <router-link to="/MemuBar/DevelopmentPlanList" class="btn btn-default">返回</router-link>
          </div>
        </form>

      </div>
    </article>
  </div>
</template>

<script>
let date= new Date();
export default {
  name: "CreateDevelopmentPlan",
  data(){
    return{
      salesChance:{},
      developmentPlans:[],
      newDevelopmentPlan: {
        saleId:'',
        planDate:"",
        planContent:"",
        },
      size: '',
    }
  },
  methods:{
    loadSaleBySaleId(){
      this.newDevelopmentPlan.planDate = new Date().getFullYear()+'-0'+(new Date().getMonth()+1)+'-0'+new Date().getDate();
      this.newDevelopmentPlan.saleId = this.$route.query.saleId
      this.$axios.get('/sale/loadSale',{
        params:{
          saleId:this.$route.query.saleId
        }
      }).then(
        res=>{
          this.salesChance=res.data.data
        }
      )
    },
    createPlan(){
      if (this.newDevelopmentPlan.planContent == ''){
        this.$message({
          showClose: true,
          message: '销售计划的内容不可为空',
          type: 'error'
        });
        return;
      }else {
        this.$axios.post('/plan/createPlan',this.newDevelopmentPlan).then(
          res=>{
            this.$message({
              showClose: true,
              message: res.data.message,
              type: 'success'
            });
            this.$router.go(0)
          }
        )
      }
    },
    loadPlans(){
      this.$axios.get('/plan/loadPlansBySaleId',{
        params:{
          saleId:this.$route.query.saleId
        }
      }).then(
        res=>{
          this.developmentPlans=res.data.data
        }
      )
    }
  },
  created() {
    this.loadSaleBySaleId()
    this.loadPlans()
  }
}
</script>

<style scoped>

</style>

